<template>
	<view class="modify">
		<view class="f32 ">
			<text class="fb">上传轮播图</text>
			（不超过5张）
			<text class="f24">396x115px</text>
		</view>
		<view class="mt20">
			<view class="forBox" v-for="(item,key) in list" :key="key">
				<view class="flex_y_center">
					<view class="overflow_1 flex_y_center flex1">
						<text class="fb c3d">
							轮播图{{key-0+1}}
						</text>
						<text class="ml12 flex1">
							<u-input v-model="item.name" placeholder="请输入轮播图名字(字数不超过15)" maxlength="15" border />
						</text>
					</view>
					<view class="f28 c3d pl20" @click="deteleList(key)">
						删除
					</view>
				</view>
				<!-- https://img.aibbyp.com/wechat/images/nHome/lbbj.png -->
				<view class="imgBox" @click="chooseImages(key)">
					<image class="imagebanner" :src="item.image ?$wanlshop.oss(item.image) :banner" mode="">
					</image>
					<image class="imagedjsc" src="https://img.aibbyp.com/wechat/images/nHome/djsc.png" mode=""></image>
				</view>
				<view class="flex_y_center mt30">
					<view class="">
						排序:
					</view>
					<view class="flex1 ml20">
						<u-input v-model="item.sort" placeholder="值越小排序越前0最大" type="number" border />
					</view>
				</view>
				<view class="flex_sb mt32" @click="clickselect(key)">
					<view class="">
						跳转内容选择
					</view>
					<view class="info">

						{{item.titleSelect ? item.titleSelect : '跳转内容'}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view>
					<view class="goodsBox mt20" v-for="(item1,key1) in item.goods" :key="key1">
						<view class="flex_y_center">
							<view class="goodsImage">
								<image class="goodsImage" v-if="item1.image" :src="$wanlshop.oss(item1.image)" mode="">
								</image>
							</view>
							<view class="ml20 flex1 f28 c3d">
								<view class="overflow_1 goodstitle">
									{{item1.title}}
								</view>
								<view class="error">
									￥{{item1.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btnBox">
					<view class="flex_y_center f32 fb">
						<!-- // 0 待审核 1 通过 2未通过 status -->
						<view class="warning" v-if="item.status == 0">
							待审核
						</view>
						<view class="primary" v-if="item.status == 1">
							已通过
						</view>
						<view class="error" v-if="item.status == 2">
							未通过
						</view>
						<button class="btn ml20 " @click="submit(key)">确定提交</button>
					</view>
				</view>
			</view>
		</view>
		<view class="flex fb f28 mt20 addBox" @click="addList">
			<view class="primary">
				新轮播图
			</view>
			<u-icon name="plus" color="#3065FA" size="34"></u-icon>

		</view>
		<u-select v-model="showselect" :list="listselect" @confirm="confirmselect"></u-select>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: 'https://img.aibbyp.com/wechat/images/nHome/lbbj.png',
				multipart: null,
				uploadurl: null,
				imageNum: 0,
				listselect: [{
					value: '0',
					label: '仅播放图片，无跳转'
				}, {
					value: '1',
					label: '跳转商品链接'
				}],
				showselect: false,
				list: [{
					image: null,
					sort: 0,
					goods: [],
					titleSelect: null,
					name: '轮播图1'
				}, ],
				goods: []
			}
		},
		onShow() {
			console.log(this.list);
		},

		onLoad() {
			this.getMultipart()
			this.getList()
		},
		methods: {
			getList() {
				this.$api.get({
					url: '/store.Banner/lists',
					success: res => {
						res.forEach(a => {
							a.image = [a.banner]
							a.titleSelect = a.type == 0 ? '仅播放图片，无跳转' : '跳转商品链接'
							a.sort = a.weigh
							a.goods = a.goods ? [a.goods] : []
						})
						this.list = res
					}
				})
			},
			// 提交
			submit(key) {
				let data = {}
				if (this.list[key].name == '' || this.list[key].name == null) {
					uni.showToast({
						title: '请输入轮播图名字',
						icon: 'none'
					})
					return
				}
				if (this.list[key].image == '' || this.list[key].image == null) {
					uni.showToast({
						title: '请上传轮播图',
						icon: 'none'
					})
					return
				}
				if(this.list[key].titleSelect == '跳转商品链接'){
					if(!this.list[key].goods[0] || !this.list[key].goods[0].id){
						uni.showToast({
							title: '请选择商品链接',
							icon: 'none'
						})
						return
					}
				}
				data = {
					name: this.list[key].name,
					banner: this.list[key].image,
					op_id: this.list[key].goods[0] ? this.list[key].goods[0].id : '',
					type: this.list[key].titleSelect == '跳转商品链接' ? '1' : '0',
					weigh: this.list[key].sort ? this.list[key].sort : -1,
					id: this.list[key].id
				}

				let url = '/store.Banner/bannerAdd'
				if (data.id) {
					url = '/store.Banner/bannerEdit'
				}
				this.$api.post({
					url: url,
					data: data,
					success: res => {
						uni.showToast({
							title: "已提交",
							icon: 'none'
						})
						this.getList()
					}
				})

			},
			// 点击选择
			clickselect(key) {
				this.imageNum = key
				this.showselect = true
			},
			// select 确定选择
			confirmselect(data) {
				console.log(data);
				this.list[this.imageNum].titleSelect = data[0].label
				if (data[0].value == '1') {
					uni.navigateTo({
						url: '/pages/note/shopList?type=modify&id='
					})
				}
			},
			// 删除轮播图
			deteleList(key) {
				let id = this.list[key].id
				let that = this
				if (id) {
					uni.showModal({
						title: '确定删除？',
						content: `即将删除${this.list[key].name}`,
						success: function(res) {
							if (res.confirm) {
								that.$api.post({
									url: '/store.Banner/bannerDel',
									data: {ids:[id]},
									success: rs => {
										uni.showToast({
											title: '已删除',
											icon: 'none'
										})
										that	.getList()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})

				} else {
					this.list.splice(key, 1);
				}

			},
			// 新增轮播图
			addList() {
				if (this.list.length == 5) {
					uni.showToast({
						title: '轮播图最多五张',
						icon: 'none'
					})
					return
				}
				this.list.push({
					image: null,
					sort: 0,
					goods: [],
					titleSelect: null,
					name: '轮播图' + (this.list.length - 0 + 1)
				})
			},
			//上传图片
			chooseImages(key) {
				this.imageNum = key
				uni.chooseImage({
					count: 1, //允许选择的数量
					success: res => {
						console.log(res);
						for (let i in res.tempFilePaths) {
							this.myUpload(res.tempFilePaths[i], 'image')
						}
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)


					}
				})
			},
			// 获取上传限制
			getMultipart() {
				this.$api.get({
					url: '/wanlshop/common/uploadData',
				}).then(res => {
					this.multipart = res.storage == 'local' ? null : res.multipart
					this.uploadurl = res.uploadurl
				})
			},
			// 上传到线上
			myUpload(filePath, type) {
				uni.showLoading({
					title: '上传中...'
				})
				this.$api.upload({
					url: this.uploadurl,
					filePath: filePath,
					name: 'file',
					formData: this.multipart,
				}).then(res => {
					console.log('成功', res);
					uni.hideLoading()
					// 视频图片
					if (type == 'video') {
						this.videoList = res.url
						this.imageList = []
						this.info.type = 'video'
						return
					}
					if (type == 'image') {
						this.list[this.imageNum].image = res.url
						console.log(this.list);
						return
					}
					// this.videoList = this.videoList.concat(res.tempFilePath);

				}).catch(res => {
					uni.hideLoading()
				})
			},


		},
	}
</script>

<style lang="scss" scoped>
	.modify {
		padding: 20rpx 20rpx 20rpx 20rpx;



		.btnBox {
			display: flex;
			flex-direction: row-reverse;
			margin-top: 30rpx;

			.btn {
				zoom: 0.8;
				width: 200rpx;
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.btn::after {
				border: none;
			}

		}



		.forBox {

			margin-top: 20rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx 30rpx 40rpx 30rpx;


			.goodsBox {
				border-top: 1rpx #ccc solid;
				padding-top: 20rpx;
				width: 100%;
				overflow: hidden;

				.goodstitle {
					width: calc(100vw - 12 0px);
				}

				.goodsImage {
					width: 80rpx;
					height: 80rpx;
					border-radius: 10rpx;
				}
			}

			.imgBox {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.imagedjsc {
					position: absolute;
					top: 92rpx;
					width: 152rpx;
					height: 44rpx;
				}
			}

			.imagebanner {
				margin-top: 20rpx;
				width: 600rpx;
				height: 186rpx;
			}
		}

		.addBox {
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>